<template>
  <div>
    <GiTable
      row-key="tradeId"
      id="userCommission"
      v-model:columns="columns"
      :loading="loading"
      :data="tableData"
      :scroll="{ x: '100%', y: '100%', minWidth: 1000 }"
      :pagination="pagination"
      @refresh="getTableData"
      :simple="true"
    >
      <template #info="{ record }">
        <div class="flex">
          <a-image
            width="100"
            height="100"
            class="mr-10 cursor-pointer"
            :src="
              record.platformId == 6
                ? klPic
                : record.platformId == 17
                ? mtPic
                : record.platformId == 9
                ? mxPic
                : record.goodsImg
            "
          />
          <div class="flex-col m-relative flex-1 overflow-hidden">
            <div style="min-height: 22px" class="my-2 line-h-24 text-overflow-2">
              <div class="m-absolute t-0 l-0" v-if="record.sourceTypeName">
                <a-tag color="red">{{ record.sourceTypeName }}</a-tag>
              </div>
              <div
                v-if="record.priceCompareStatus == 1"
                class="m-absolute t-0"
                :style="{ left: `${record.sourceTypeName ? record.sourceTypeName.length * 14 + 16 : 0}px` }"
              >
                <a-tag color="#f53f3f">比价</a-tag>
              </div>
              <div
                :style="{
                  textIndent: `${
                    (record.sourceTypeName ? record.sourceTypeName.length * 14 + 18 : 0) +
                    (record.priceCompareStatus == 1 ? 42 : 0)
                  }px`
                }"
              >
                <a-tooltip :content="record.goodsTitle">
                  <span>{{ record.goodsTitle }}</span>
                </a-tooltip>
              </div>
            </div>
            <div class="flex flex-a-c text-size-13 text808080 my-2" v-if="record.shopName">
              <img src="@/assets/images/dianpu.png" alt="" class="mr-2 w-4n h-4n" />
              <span class="text-overflow-1 flex-1">{{ record.shopName }}</span>
            </div>
            <div class="text-size-12 flex flex-a-c">
              <ms-copy-div showLeftTitle :text="record.goodsId" title="商品ID"></ms-copy-div>
            </div>
          </div>
        </div>
      </template>
      <template #order="{ record }">
        <div class="w-full flex-col">
          <ms-copy-div showLeftTitle :text="record.orderSn" title="订单号"></ms-copy-div>
          <ms-copy-div showLeftTitle :text="record.tradeId" title="子订单号"></ms-copy-div>
          <div>
            订单状态:
            {{
              record.orderStatus == 1
                ? '已支付'
                : record.orderStatus == 2
                ? '已结算'
                : record.orderStatus == 10
                ? '失效'
                : '--'
            }}
          </div>
        </div>
      </template>
      <template #user="{ record }">
        <div class="w-full flex-col flex-j-c">
          <div>昵称: {{ record?.userInfo?.nickname || '--' }}</div>
          <div>邀请码: {{ record?.userInfo?.inviteCode || '--' }}</div>
          <div>手机号: {{ record?.userInfo?.mobile || '--' }}</div>
        </div>
      </template>
      <template #time="{ record }">
        <div class="w-full flex-col flex-j-c">
          <div>下单时间: {{ record.paidTime || '--' }}</div>
          <div>结算时间: {{ record.earningTime || '--' }}</div>
        </div>
      </template>
      <template #commission="{ record }">
        <div class="w-full flex-col">
          <div class="flex flex-a-c my-2" v-if="record.goodsPrice">
            商品价格:<span class="textd43030 text-size-14 font-bold">￥{{ record.goodsPrice }} </span>
          </div>
          <div>付款金额: ¥ {{ record.payPrice || '--' }}</div>
          <div>预估佣金: ¥ {{ record.commission }}</div>
        </div>
      </template>
      <template #number="{ record }">
        <div class="w-full flex-col">
          <div>商品数量: {{ record.goodsNum || '--' }}</div>
        </div>
      </template>
    </GiTable>
  </div>
</template>
<script setup>
import { usePagination, usePlatform } from '@/hooks'
import { settlementsList } from '@/apis'
import { deepClone, deleteEmpty } from '@/utils/common'

const route = useRoute()
const props = defineProps(['userId'])
const columns = ref([
  {
    title: '金额',
    align: 'center',
    dataIndex: 'amount',
    width: 200
  },
  {
    title: '获取时间',
    align: 'center',
    dataIndex: 'settlementAt',
    width: 200
  },
  {
    title: '当前状态',
    align: 'center',
    dataIndex: 'appendBalanceStatus',
    render: ({ record }) => {
      return record.appendBalanceStatus == 20
        ? '已结算'
        : record.appendBalanceStatus == 20
        ? '待结算'
        : record.appendBalanceStatus == 0
        ? '审核中'
        : '未知'
    },
    width: 200
  },
  {
    title: '备注',
    align: 'center',
    dataIndex: 'remark',
    render: ({ record }) => {
      return record.remark || '--'
    }
  }
])

const loading = ref(false)
const tableData = ref([])
const klPic = 'https://images.maishou88.com/admin/union_activities/20230829/20230829111243_5680.png'
const mtPic = 'https://images.maishou88.com/admin/union_activities/20230829/20230829111325_4046.png'
const mxPic = 'https://images.maishou88.com/admin/union_activities/20230829/20230829111344_8206.png'

const listParams = reactive({
  page: 1,
  pageSize: 15,
  userId: route.query.id
})
const { pagination, setTotal } = usePagination(() => getTableData(), { defaultPageSize: listParams.size })
// 获取列表数据
const getTableData = async () => {
  try {
    loading.value = true
    listParams.page = pagination.current
    listParams.pageSize = pagination.pageSize
    if (!listParams.userId) listParams.userId = props.userId
    const param = deepClone(listParams)
    const res = await settlementsList(deleteEmpty(param))
    tableData.value = res.data.list
    setTotal(res?.data?.total || 0)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  setTimeout(() => {
    getTableData()
  }, 1000)
})

// 表格页码改变
// const changeCurrent = (e) => {
//   pagination.current = listParams.page = e
//   getTableData()
// }
</script>
<style lang="scss" scoped>
.textd90000 {
  color: #d90000;
}
.aggs {
  width: fit-content;
  line-height: 26px;
  background-color: rgb(var(--primary-1));
  box-shadow: rgb(var(--primary-1)) solid 1px;
  border-radius: 4px;
  border: 1px solid $color-theme;
}
.text808080 {
  color: #808080;
}
.text-size-13 {
  font-size: 13px;
}
.textd43030 {
  color: #d43030;
}
.text2a82e4 {
  color: #2a82e4;
}
</style>
